<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <title>初识vue</title>
        <!-- 引入vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
        <!-- 
            初始Vue：
                1、想让Vue工作，就必须创建一个Vue实例，并且要传入一个配置对象；
                2、root容器里的代码依然符合html规范，只不过配入了一些特殊的Vue语法；
                3、root容器里的代码被称为【Vue模板】；
                4、一个Vue实例只能接管一个容器；
                5、真实开发中只有一个Vue实例，并且会配合着组件一起使用
                6、{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
                7、一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

                注意区分： js表达式 和 js代码(语句)
                1、表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
                    (1). a
                    (2). a+b
                    (3). demo(1) -- 函数调用表达式
                    (4).x === y ? 'a':'b' --三元表达式

                2、js代码（语句）    
                    (1). if(){}
                    (2). for(){}


         -->


        <!-- 准备好一个容器 -->
        <div id="root">
            <!-- {{插值表达式}} 作用读取data对象中name的值-->
            <h1>Hello {{name}} {{address}}</h1>
        </div>
        
       
      

        <script type="text/javascript">
        Vue.config.productionTip = false //以阻止 vue 在启动时生成生产提示。
        // 创建vue实例
        new Vue({
            el:'#root', // el用于指定当前Vue实例为哪个容器服务，值通常为CSS选择器字符串。
            data:{// data中用于存储数据，数据供el所指定的容器去使用。值先暂时写成一个对象
                name:'南风小可爱',
                address:'天津'
            }
        })
       
       
        </script>
	</body>
</html>